<template>
    <!--<i @click="click" :class="{'el-icon-mars-arrowexpand': expand }"></i>-->
    <i @click="click" :class="[ex==true?'el-icon-mars-arrowexpand': 'el-icon-mars-arrowshrink']"></i>
</template>

<script>
    import screenfull from 'screenfull'

    export default {
        name: 'index',
        data() {
            return {
                ex: true
            }
        },
        methods: {
            click() {
                if(!screenfull.enabled) {
                    this.$message({
                        message: 'you browser can not work',
                        type: 'warning'
                    })
                    return false
                }
                this.ex = screenfull.isFullscreen
                screenfull.toggle()
            }
        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>
    .el-icon-mars-arrowexpand{
        font-size: 26px;
    }
    .el-icon-mars-arrowshrink{
        font-size: 23px;
    }
</style>